<template>
  <div class="sell">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>销售确认书管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="main">
      <el-button type="primary" class="btn" @click="add"
        >添加销售确认书</el-button
      >
      <el-table
        :data="
          dataList.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        border
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="slid" label="确认书编号" width="180">
        </el-table-column>
        <el-table-column prop="buyer" label="买方" width="120">
        </el-table-column>
        <el-table-column prop="seller" label="卖方" width="120">
        </el-table-column>
        <el-table-column prop="time" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="ischeck" label="单据状态" width="120">
        </el-table-column>
        <el-table-column label="操作" width="353">
          <template slot-scope="scope">
            <el-button type="primary" class="btn" @click="lookOver(scope.row)"
              >查看</el-button
            >
            <el-button
              type="primary"
              class="btn"
              @click="check(scope.row)"
              v-if="scope.row.ischeck == '未确认'"
              >确认</el-button
            >
            <el-button
              type="primary"
              class="btn"
              @click="edit(scope.row)"
              v-if="scope.row.ischeck == '未确认'"
              >修改</el-button
            >
            <el-button type="danger" class="btn" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <el-dialog
        title="销售确认单详细信息"
        :visible.sync="detaildialogVisible"
        width="80%"
      >
        <el-descriptions direction="vertical" :column="2" border>
          <el-descriptions-item label="买方">{{
            currentRow.buyer
          }}</el-descriptions-item>
          <el-descriptions-item label="卖方">{{
            currentRow.seller
          }}</el-descriptions-item>
          <el-descriptions-item label="订单日期">{{
            currentRow.time
          }}</el-descriptions-item>
          <el-descriptions-item label="确认书编号">{{
            currentRow.slid
          }}</el-descriptions-item>
        </el-descriptions>
        <template>
          <el-table :data="sllist" stripe style="width: 100%">
            <el-table-column prop="pid" label="商品编号"></el-table-column>
            <el-table-column prop="brand" label="品牌"></el-table-column>
              <el-table-column prop="type" label="纸种"> </el-table-column>
            <el-table-column prop="rank" label="级别"> </el-table-column>
            <el-table-column prop="perweight" label="克重"> </el-table-column>
            <el-table-column prop="guige" label="规格"> </el-table-column>
            <el-table-column prop="num" label="件数"> </el-table-column>
            <el-table-column prop="numUnit" label="重量"> </el-table-column>
            <el-table-column prop="price" label="单价"> </el-table-column>
            <el-table-column prop="total" label="总价"> </el-table-column>
          </el-table>
        </template>

        <span slot="footer" class="dialog-footer">
          <el-button @click="detaildialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </el-card>

    <el-dialog
      :title="modifyForm.slid != '' ? '采购单修改' : '采购单添加'"
      :visible.sync="upsertdialogVisible"
      width="70%"
    >
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="买方">
          <el-select v-model="modifyForm.buyer" placeholder="请选择客户">
            <el-option
              v-for="item in cust"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="卖方"
          ><el-input type="text" v-model="modifyForm.seller"></el-input
        ></el-descriptions-item>
        <el-descriptions-item label="订单日期">
          <el-date-picker
            v-model="modifyForm.time"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item v-if="modifyForm.slid != ''" label="采购号">{{
          modifyForm.slid
        }}</el-descriptions-item>
      </el-descriptions>
      <el-table :data="modifyForm.sllist" border style="width: 100%">
        <el-table-column prop="brand" label="品牌"></el-table-column>
        <el-table-column prop="type" label="纸种"> </el-table-column>
        <el-table-column prop="rank" label="级别"> </el-table-column>
        <el-table-column prop="perweight" label="克重"> </el-table-column>
        <el-table-column prop="guige" label="规格"> </el-table-column>
        <el-table-column prop="unit" label="单位"> </el-table-column>
        <el-table-column label="重量">
          <template slot-scope="scope">
            <el-input
              type="number"
              inputmode="decimal"
              v-model.number="scope.row.numUnit"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="件数">
          <template slot-scope="scope">
            <el-input
              type="number"
              inputmode="decimal"
              v-model.number="scope.row.num"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <el-input
              type="number"
              inputmode="decimal"
              v-model.number="scope.row.price"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="总价">
          <template slot-scope="scope">
            <span>{{ scope.row.price * scope.row.num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="removeitem(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="showadditem()">添加表项</el-button>
        <el-button @click="upsertdialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="modifyForm.slid != ''" @click="update"
          >修 改</el-button
        >
        <el-button type="primary" v-else @click="insert">新 增</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加表项" :visible.sync="editdialogVisible3" width="60%">
      <el-form
        :model="newitem"
        ref="addFormRef"
        label-width="70px"
        style="width: 70%"
      >
        <el-form-item label="商品编码" prop="pid">
          <el-select v-model="newitem.index" placeholder="请输入商品编码">
            <el-option
              v-for="(item, index) in options"
              :key="item.id"
              :label="'品牌:' + item.brand + ' type:' + item.type"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订货数量" prop="numUnit">
          <el-input
            placeholder="请输入订货数量"
            type="number"
            inputmode="decimal"
            v-model.number="newitem.numUnit"
          ></el-input>
        </el-form-item>
        <el-form-item label="件数" prop="num">
          <el-input
            placeholder="请输入件数量"
            type="number"
            inputmode="decimal"
            v-model.number="newitem.num"
          ></el-input>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input
            placeholder="请输入订货单价"
            type="number"
            inputmode="decimal"
            v-model.number="newitem.price"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="additem()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAll, slUpsert, slDel, slCheck } from "../../network/SellManage";
import { getopt } from "../../network/PurchaseManage";
import { getAll as getcust } from "../../network/CustManage";
export default {
  data() {
    return {
      options: [],
      dataList: [],
      upsertdialogVisible: false,
      detaildialogVisible: false,
      sllist: [],
      currentPage: 1,
      pagesize: 5,
      total: 0,
      currentRow: {},
      modifyForm: {
        slid: "",
        time: "",
        buyer: "",
        seller: "",
        sllist: [],
      },
      editdialogVisible3: false,
      newitem: {
        pid: "",
        numUnit: null,
        num: null,
        price: null,
        index: null,
        guige: null,
      },
      cust: [],
    };
  },
  created() {
    this.getList();
    getopt()
      .then((res) => {
        this.options = res.data.obj;
        console.log(this.options);
      })
      .catch((err) => {});
    getcust()
      .then((res) => {
        this.cust = res.data.obj;
        console.log(this.cust);
      })
      .catch((err) => {});
  },
  methods: {
    getList() {
      getAll().then((res) => {
        this.dataList = res.data.obj;
        this.total = this.dataList.length;
        this.dataList.forEach((item) => {
          item.sllist = JSON.parse(item.sllist);
          item.ischeck = item.ischeck ? "已确认" : "未确认";
        });
        console.log(this.dataList);
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      console.log(val)
      this.currentPage = val;
    },
    add() {
      this.upsertdialogVisible = true;
      this.modifyForm = {
        slid: "",
        time: "",
        buyer: "",
        seller: "",
        sllist: [],
      };
    },
    lookOver(row) {
      this.detaildialogVisible = true;
      this.currentRow = row;
      this.sllist = row.sllist;
      console.log(this.sllist);
    },
    check(row) {
      this.$confirm("确认审批该单据？")
        .then((_) => {
          slCheck({ sellId: row.slid }).then((res) => {
            if (res.data.code != "200") {
              this.$message.error(res.data.status);
            } else {
              this.$message({
                message: "审批成功！",
                type: "success",
              });
              this.getList();
            }
          });
        })
        .catch((_) => {});
    },
    del(row) {
      this.$confirm("确认删除该单据？")
        .then((_) => {
          slDel({ sellId: row.slid }).then((res) => {
            this.getList();
          });
        })
        .catch((_) => {});
    },
    edit(row) {
      this.upsertdialogVisible = true;
      this.modifyForm = row;
    },
    showadditem() {
      this.newitem = {
        pid: "",
        numUnit: null,
        num: null,
        price: null,
        index: null,
        guige: null,
      };
      this.editdialogVisible3 = true;
    },
    additem() {
      this.modifyForm.sllist.push({
        brand: this.options[this.newitem.index].brand,
        guige: this.options[this.newitem.index].guide,
        id: this.options[this.newitem.index].id,
        pid: this.options[this.newitem.index].id,
        perweight: this.options[this.newitem.index].perweight,
        rank: this.options[this.newitem.index].rank1,
        type: this.options[this.newitem.index].type,
        unit: this.options[this.newitem.index].unit,
        num: this.newitem.num,
        numUnit: this.newitem.numUnit,
        price: this.newitem.price,
        total: this.newitem.price * this.newitem.num,
      });
      this.editdialogVisible3 = false;
    },
    removeitem(index) {
      this.modifyForm.sllist.splice(index, 1);
    },
    insert() {
      let sell = this.modifyForm;
      sell.sllist = JSON.stringify(sell.sllist);
      slUpsert(sell).then((res) => {
        console.log(res);
        if (res.data.code == "200") {
          this.$message({
            message: res.data.status,
            type: "success",
          });
          this.getList();
          this.upsertdialogVisible = false;
        } else {
          this.$message(res.data.status);
        }
      });
    },
    update() {
      let sell = this.modifyForm;
      sell.ischeck = false;
      sell.sllist.forEach((item) => {
        item.total = item.price * item.num;
      });
      sell.sllist = JSON.stringify(sell.sllist);
      slUpsert(sell).then((res) => {
        console.log(res);
        if (res.data.code == "200") {
          this.$message({
            message: res.data.status,
            type: "success",
          });
          this.getList();
          this.upsertdialogVisible = false;
        } else {
          this.$message(res.data.status);
        }
      });
    },
  },
};
</script>
<style scoped>
.main {
  margin-inline: 15px;
  min-height: 100%;
  height: 100%;
  margin-top: 10px;
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>